﻿<template id="@(ViewBag.PageTemplate)">
    <div class="layout-page-content">
        <single_table :api="`${path}/getdata`" :pagination="true" :border="true" row-key="Id" :search-columns="searchColumns" ref="tableRef">
            <template #header-left="scope">@(Html.Raw(ViewBag.PageFuncs("tools")))</template>
            <template #default>
                <el-table-column type="selection" fixed="left" width="50" align="center"></el-table-column>

                @* 在此处添加表的列代码 *@
                <el-table-column prop="Prop1" label="字段1" width="150" align="center"></el-table-column>
                <el-table-column prop="Prop2" label="字段2" width="300" align="center">
                    <template #default="scope">
                        <span>{{scope.row.Prop2}}-{{scope.row.Prop3}}</span>
                    </template>
                </el-table-column>
                @* 在此处添加表的列代码 *@

                <single_table_operation count="@(ViewBag.PageFuncs("table:count"))">
                    <template #default="scope">@(Html.Raw(ViewBag.PageFuncs("table")))</template>
                </single_table_operation>
            </template>
        </single_table>
        <component is="@(ViewBag.GetCompName("form"))" ref="formRef" v-on:refresh="refresh"></component>
    </div>
</template>
@await Html.PartialAsync("Form")
<script type="text/javascript">
    var @(ViewBag.PageName) = {
        template: "#@(ViewBag.PageTemplate)", data() {
            return {
                path: "@(ViewBag.PagePath)",
                searchColumns: [
                    { title: "搜索框文字前缀", prop: "搜索参数字段名" }
                ]
            }
        },
        components: { @(ViewBag.GetCompName("form")) },
        methods: {
            init(){
                var that = this;
            },
            refresh(){
                this.$refs.tableRef.loadData();
            },
            form(title, row){
                this.$refs.formRef.open(title, row);
            },
            del(ids){
                app.func.delete(`${this.path}/delete`, ids, this.refresh);
            }
        },
        mounted() { this.init(); }
    };
</script>